var style = {
    "version": 8,
    "name": "lzugis",
    "sources": {
        "XYZTile": {
            "type": "raster",
            "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
            "tileSize": 256
        }
    },
    "layers": [{
        "id": "XYZTile",
        "type": "raster",
        "source": "XYZTile",
        "minzoom": 0,
        "maxzoom": 17
    }]
}
const dom = document.getElementById('map');
window.map = new mapboxgl.Map({
    container: dom,
    style: style,
    center: [103.081163, 37.1612],
    zoom: 3.45,
    minZoom: 2,
    maxZoom: 18,
    trackResize: false
});
map.on('load', function (){
    addControls();
});

function OverviewMapControl () {}
OverviewMapControl.prototype = {
    onAdd(map) {
        var that = this;
        this._map = map;
        this._overMap = null;
        var w = map.getCanvas().width * 0.15,
            h = map.getCanvas().height * 0.15;
        this._container = document.createElement('div');
        this._container.className = 'overview-map';
        this._container.style.width = w + 'px';
        this._container.style.height = h + 'px';

        var zoom = this._map.getZoom();
        var center = this._map.getCenter();
        this._overMap = new mapboxgl.Map({
            container: this._container,
            style: style,
            center: center,
            zoom: zoom - 2.5,
            minZoom: 0,
            maxZoom: 18,
            trackResize: false
        });

        // 绑定map evt
        that._map.on('move', function () {
            setOverMap(that._map, that._overMap, that._mask);
        })
        that._map.on('load', function () {
            setOverMap(that._map, that._overMap, that._mask);
        })

        that._overMap.on('load', function() {
            that._mask = document.createElement('div');
            that._mask.className = 'overview-mask';
            that._overMap.getContainer().appendChild(that._mask);
        })

        return this._container;
    },
    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = null;
        this._overMap = null;
    }
}

function setOverMap(map, ovMap, mask) {
    const zoom = map.getZoom();
    const center = map.getCenter();
    ovMap.jumpTo({
        center: center,
        zoom: zoom - 2.5
    });

    let bounds = map.getBounds().toArray();
    bounds = bounds[0].concat(bounds[1])
    const topLeft = [bounds[0], bounds[3]];
    const bottomRight = [bounds[2], bounds[1]];
    const pixeltopLeft = ovMap.project(topLeft);
    const pixelbottomRight = ovMap.project(bottomRight);

    const w = Math.abs(pixelbottomRight.x - pixeltopLeft.x);
    const h = Math.abs(pixelbottomRight.y - pixeltopLeft.y);

    mask.style.width = Math.round(w) + 'px';
    mask.style.height = Math.round(h) + 'px';
    mask.style.left = Math.round(pixeltopLeft.x) + 'px';
    mask.style.top = Math.round(pixeltopLeft.y) + 'px';
}

function addControls() {
    var nav = new mapboxgl.NavigationControl({
        showCompass: true,
        showZoom: true,
        visualizePitch: true
    });
    // 'top-left' ,  'top-right' ,  'bottom-left' , and  'bottom-right'
    map.addControl(nav, 'top-left');

    // 'imperial' ,  'metric' or  'nautical'
    var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
    });
    map.addControl(scale, 'bottom-left');
    scale.setUnit('metric');

    var full = new mapboxgl.FullscreenControl({
        container: document.querySelector('body')
    });
    map.addControl(full);

    var overview = new OverviewMapControl();
    map.addControl(overview, 'bottom-right');
}